<template>
  <div class="game-board" ref="gameBoard">
    <!-- 角色 -->
    <Character
      :position="characterPosition"
      :rotation="characterRotation"
      :state="characterState"
    />
    
    <!-- 平台 -->
    <Platform
      v-for="(platform, index) in visiblePlatforms"
      :key="index"
      :platform="platform"
      :is-current="index === currentPlatformIndex"
    />
  </div>
</template>

<script>
import Character from './Character.vue'
import Platform from './Platform.vue'

export default {
  name: 'GameBoard',
  components: {
    Character,
    Platform
  },
  props: {
    characterPosition: {
      type: Object,
      required: true
    },
    characterRotation: {
      type: Number,
      default: 0
    },
    platforms: {
      type: Array,
      required: true
    },
    gameState: {
      type: String,
      required: true
    }
  },
  data() {
    return {
      characterState: 'standing', // standing, jumping, falling
      currentPlatformIndex: 0,
      cameraOffset: { x: 0, y: 0 }
    }
  },
  computed: {
    cameraTransform() {
      return `translate(${this.cameraOffset.x}px, ${this.cameraOffset.y}px)`;
    },
    visiblePlatforms() {
      // 只渲染屏幕内的平台以提高性能
      return this.platforms.filter(platform => {
        // 这里可以根据屏幕尺寸和摄像机位置过滤平台
        return true // 简化实现，实际项目中需要根据视口计算
      })
    }
  },
  watch: {
    characterPosition: {
      handler(newPos) {
        // 更新摄像机位置以跟随角色
        this.updateCamera()
      },
      deep: true
    }
  },
  methods: {
    updateCamera() {
      // 摄像机跟随角色移动，使角色保持在屏幕中心
      if (this.$refs.gameBoard) {
        const boardWidth = this.$refs.gameBoard.offsetWidth;
        const boardHeight = this.$refs.gameBoard.offsetHeight;
        this.cameraOffset.x = -this.characterPosition.x + boardWidth / 2;
        this.cameraOffset.y = -this.characterPosition.y + boardHeight / 2;
      }
    }
  }
}
</script>

<style scoped>
.game-board {
  position: absolute;
  width: 100%;
  height: 100%;
  transform: v-bind(cameraTransform);
  transition: transform 0.1s linear;
}
</style>